<template>
  <van-swipe-cell :right-width="80" :on-close="onClose" :disabled="disabled">          
    <van-cell-group :border="false">      
      <div class="my-custom-item" :class="last ? '' : 'scale-1px-bottom'" @click.stop="clickHandler">
        <avatar size="normal" class="user-avatar" :avatar="info.avatarUrl"></avatar>
        <div class="right-box">
          <div class="top-box">
            <div class="baseinfo-box">
              <p class="username">{{ info.clientRemarkName || info.clientName || '暂无名称' }}</p>
              <p class="base-focus">{{ info.lastTimeStr }}</p>
            </div>
            <div class="intention-box">
              <p class="num">{{ info.browsCount }}</p>
              <p class="text">访问次数</p>
            </div>
          </div>
          <div class="bottom-box">
            <span class="item-tag" v-for="(item, index) in info.clientTagList">{{ item }}</span>
          </div>
        </div>
      </div>
    </van-cell-group>
    <span slot="right" class="delete-btn">删除</span>
  </van-swipe-cell>
</template>
<script>
import Avatar from 'COMP/Avatar'
import swipeCell from 'vue-swipe-cell'
export default {
  components: {
    Avatar,
    swipeCell
  },
  props: {
    num: Number,
    info: Object,
    isClassify:{
      type: Boolean,
      default: true
    },
    last:{
      type:Boolean
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    isAndroid:false,
  }),
  created() {
    this.getTerminalType()
  },
  methods: {
    /**
     * 获取终端类型
     */
    getTerminalType(){
      const u = navigator.userAgent;
      this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
    },

    /**
     * 弹出提示框
     */
    clickHandler() {
      this.$emit('click', this.info)
    },

    /**
     * 确定删除
     */
    confirm () {
      this.$emit('delete', this.num)
    },

    /**
     * 关闭
     */
    onClose(clickPosition, instance) {
      switch (clickPosition) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close();
          break;
        case 'right':
           this.$dialog.confirm({
              title: '是否确定移除该客户',
              message: '删除客户,也会删除与TA的聊天记录',
              className: 'delete-dialog'
          }).then(() => {
            this.confirm()
            instance.close()
          }).catch(() => {
            instance.close()
          })
          break
      }
    }
  },
  computed: {
    /**
     * 最近访问时间
     */
    focusInfo() {
      return `最近访问:${this.info.lastTime}`
    }
  }
}
</script>

<style lang="less" scoped>

.my-custom-item {
  display: flex;
  // align-items: center;
  margin: 0 16px;
  // padding-left: 16px;
  .user-avatar {
    margin: 15px;
    margin-left: 0px;
    margin-right: 12px;
  }
  .user-attention {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 49px;
    top: 49px;
  }
  .right-box {
    flex: 1;
    font-size: 0;
    margin: 16px 0;
    .top-box {
      width: 100%;
      display: flex;
    }
    .bottom-box {
      padding-top: 8px;
      .item-tag {
        padding: 4px 5px;
        font-size: 12px;
        // height: 20px;
        line-height: 12px;
        color: rgba(64, 81, 111, 0.8);
        background: #EEF1F4;;
        border-radius:2px;
        margin-right: 6px;
        display: inline-block;
      }
    }
  }
  .baseinfo-box {
   
    flex: 1;
    // font-family: PingFangSC-Semibold;
    .username {
      line-height: 24px;
      font-size: 16px;
      padding-top: 2px;
      font-weight: 400;
      color: #13284D; 
      max-width:100%;
      // font-family: PingFangSC-Regular;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .base-focus {
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      margin-top: 4px;
      color: #9BA4B4;
      font-family: PingFangSC-Regular;
    }
  }
  .intention-box {
    text-align: center;
    .num {
      font-size: 20px;
      padding-bottom: 2px;
      font-weight: 500;
      color: #405170;
    }
    .text {
      font-size: 10px;
      line-height: 16px;
      color: #9BA4B4;
    }
  }
}
.delete-btn{ 
  display: flex;
  height: 100%;
  width: 80px;
  color: #fff;
  font-size: 16px;
  background-color: #EA4D2E;
  align-items: center;
  justify-content: center;
}
</style>
